<template>
  <div class="search-video page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <navbar :title="title"></navbar>
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
      <div class="search-box">
        <!-- <div class="left" @click='goBack'>
          <van-icon name="arrow-left" />
        </div> -->
        <div class="search">
          <form action="javascript:return true">
            <input type="search" placeholder="请输入搜索内容" v-model.trim="value" @keyup.enter="searchVideo()">
          </form>
        </div>
        <!-- <div class="right" @click="cancel">
          取消
        </div> -->
      </div>
      <img class="s-img" src="../../assets/image/icon_search／灰.png" alt="">
      <!-- 展示搜索历史 -->
      <div class="before-box" v-show="showHistory">
        <div class="title-box">
          <div class="title">历史记录</div>
          <div class="delete-box">
            <img src="../../assets/image/icon／编辑／15delete.png" alt="" @click="deleted()">
          </div>
        </div>
        <div class="tags-box">
          <span v-for="(item, index) in history" :key="index" @click="searchItem(item)">{{item}}</span>
        </div>
      </div>
      <!-- 展示搜索内容 -->
      <div class="search-detail" v-show="!showHistory" >
        <van-tabs v-model="activeName" @click="handelTags" ref="tabs">
          <van-tab title="全部" name="2">
            <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'38vw'}">
            <van-pull-refresh
            v-model="refreshing"
            @refresh="onRefresh"
            class="detail-item"
            >
              <image-fall v-if="items" :items='items'></image-fall>
              <div class="loading" v-else>
                <van-loading size="24px" >加载中...</van-loading>
              </div>
            </van-pull-refresh>
            <div class="more-info" v-show="haveMore" @click="getMore()">点击加载更多</div>
            <div class="more-info" v-show="noMore">没有更多了</div>
            </div>
          </van-tab>
          <van-tab title="大V推荐" name="0">
            
            <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'38vw'}">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="detail-item">
              <image-fall v-if="items" :items='items'></image-fall>
              <div class="loading" v-else>
                <van-loading size="24px" >加载中...</van-loading>
              </div>
            </van-pull-refresh>
            <div class="more-info" v-show="haveMore" @click="getMore()">点击加载更多</div>
            <div class="more-info" v-show="noMore">没有更多了</div></div>
          </van-tab>
          <van-tab title="提车广场" name="1">
            
            <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'38vw'}">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="detail-item">
              <image-fall v-if="items" :items='items'></image-fall>
              <div class="loading" v-else>
                <van-loading size="24px" >加载中...</van-loading>
              </div>
            </van-pull-refresh>
            <div class="more-info" v-show="haveMore" @click="getMore()">点击加载更多</div>
            <div class="more-info" v-show="noMore">没有更多了</div></div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllList, getTitleList } from './api'
import imageFall from '../../components/common/imageFall.vue'
export default {
  components: {
    imageFall
  },
  data() {
    return {
      title:'搜索',
      value:'',
      history: null,
      showHistory: true,
      tagName: '', // 默认请求a的数据
      activeName: '2',
      items: null,
      list: [],
      limit: 20,
      page: 1,
      refreshing: false,
      haveMore: false,
      noMore: false,
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:''
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    // 下拉刷新
    onRefresh() {
      this.items = null
      this.list = []
      this.getData()
    },
    // 点击加载更多
    getMore() {
      this.page = this.page+1
      this.items = null
      this.getData()
    },
    // 删除历史记录
    deleted() {
      this.history = []
      localStorage.setItem('searchHistory', this.history)
    },
    // 历史记录点击后给value赋值
    searchItem(item) {
      // console.log(item)
      this.value = item
      this.value = this.value.replace(/\s+/g,"")
      this.searchVideo()
    },
    // 搜索视频
    searchVideo() {
      if(this.history != null) {
        let n = this.history.indexOf(this.value)
        if(n < 0 && this.value != '') {
          this.history.push(this.value)
          localStorage.setItem('searchHistory', JSON.stringify(this.history))
        }
      } else {
        this.history = []
        if(this.value != '') {
          this.history.push(this.value)
          localStorage.setItem('searchHistory', JSON.stringify(this.history))
        }
      }

      this.showHistory = false
      // 全部置空，获取第一页数据
      this.items = null
      this.list = []
      this.page = 1
      this.$refs.tabs.resize()
      this.getData()
      document.querySelector('body').setAttribute('style', 'background-color:#F8F8F8')
    },
    // 获取数据
    async getData() {
      this.noMore = false
      this.haveMore = false
      let data
      console.log(this.value)
      this.value = this.value.replace(/\s+/g,"")
      if(this.value === '') {
        const res = await getAllList( this.limit, this.page, this.tagName)
        data = res.data.list
      } else {
        const title = await getTitleList(this.value, this.page, this.limit, this.tagName)
        // const author = await getAuthorList(this.value, this.page, this.limit, this.tagName)
        data = [...title.data.list]
      }
      let list = data.map(item => {
        if(item.platformManagementC === null) {
          item.platformManagementC = {platform: null}
        }
        if(item.tbCelebrityManagementCS === null) {
          item.tbCelebrityManagementCS = {images: null}
        }
          return {
            tag: item.tbTagCS.map(item => {
              return item.tagName
            }),
            img: item.tbVideoManagementCS.videoS,
            title: item.tbVideoManagementCS.videoTitle,
            userImg: item.tbCelebrityManagementCS.images,
            userName: item.tbVideoManagementCS.author,
            fromNum: 1,
            from: item.platformManagementC.images,
            // from: ['111','222'],
            id: item.tbVideoManagementCS.id,
            videoImg: item.tbVideoManagementCS.cover
          }
        })
        this.list.push(...list)
        this.items = this.list
        console.log(this.list)
        if(list.length < 20 && list.length !== 0) {
          this.noMore = true
          this.haveMore = false
        } else if (list.length === 20) {
          this.noMore = false
          this.haveMore = true
        } else if (list.length === 0) {
          this.noMore = true
          this.haveMore = false
          this.$toast({
            message: '没有查询结果',
            position: 'top'
          })
          // console.log(1)
        }
        this.refreshing = false;
    },
    // 获取路由链接上拼接的token值
    getTokenInUrl() {
      var url = window.location.href;
      if (url.indexOf("token") > 0) {
        let getTokenParams = window.location.href.split("token=")[1];
        getTokenParams=getTokenParams.split("&")[0];
        if (getTokenParams.length >= 32) {
          getTokenParams = getTokenParams.substr(0, 32);
          console.log('%c [ getTokenParams ]', 'font-size:13px; background:pink; color:#bf2c9f;', getTokenParams)
          sessionStorage.setItem("token", getTokenParams);
        }
      }
    },
    // 根据标签查询
    handelTags(name, title) {
      if(parseInt(name) === 2) {
        this.tagName = ''
      } else {
        this.tagName = name
      }
      // 全部置空，获取第一页数据
      this.items = null
      this.list = []
      this.page = 1
      this.getData()
    }
  },
  mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:white')
  },
  created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
    // 修改页面标题
    document.title = "搜索"
    // 获取路由链接上拼接的token值
    this.getTokenInUrl()
    this.history = JSON.parse(localStorage.getItem('searchHistory'))
  }
}
</script>

<style lang='less'>
.van-tabs__line{
  background-color: rgba(246, 196, 1, 1);
}
</style>
<style scoped lang='less'>
// .search-detail{
//   background: #F8F8F8;
// }
.loading{
  text-align: center;
  font-size: 12px;
  padding: 10px;
  color: #999999;
}
.more-info{
  text-align: center;
  font-size: 12px;
  padding: 10px;
  color: #999999;
}
.detail-item{
  padding: 16px 16px 0 16px;
}
.tags-box{
  padding: 0 20px;
  // height: 100%;
  span{
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 16px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    background: #F8F8F8;
    border-radius: 4px;
  }
}
.van-icon{
  font-size: 24px;
}
// .search-video {
//   position: relative;
// }
.s-img{
  position: absolute;
  top: 8vw;
  left: 9%;
}
.search-box{
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 42px;
  padding-top: 15px;
  // .left {
  //   flex: 1;
  // }
  // .right {
  //   flex: 1.3;
  //   font-size: 14px;
  //   font-family: PingFangSC-Regular, PingFang SC;
  //   font-weight: 400;
  //   color: #666666;
  // }
  .search{
    padding: 20px;
    flex: 7;
    input{
      width: 90vw;
      border: none;
      height: 28px;
      border-radius: 18px;
      background: #F8F8F8;
      padding-left: 10vw;
    }
    input::-webkit-input-placeholder{
      color: #B3B3B3;
    }
    img{
      height: 14px;
      width: 14px;
    }
  }

}
.title-box{
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 16px 20px;
  .title{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }
  .delete-box{}
}
</style>
